<template>
	<view class="container">
		<navbar :title="pageType == 1 ?'管理津贴':'收益提成'" :background="background" :bgSize='bgSize' color='#fff'></navbar>
		<view class="bg">
			<image :src='hostUrl+"/static/img/detail-bg.png"'>
			</image>
		</view>
		<view class="wrap" v-if='showPage'>
			<view class="detail-wrap" v-if='list.length > 0'>
				<view class="detail-item" v-for="(item,index) in list" :key="index">
					<view class="detail-item-top">
						<view class="title">订单编号：{{item.order_sn}}</view>
						<view class="num"><text>￥</text>{{item.value}}</view>
					</view>
					<view class="detail-item-bottom">
						<view class="time">{{item.addtime}}</view>
						<view class="time">{{pageType == 1 ? '津贴余额':'提成余额'}}：￥{{item.old_money}}</view>
					</view>
				</view>
			</view>
			<no-data text="暂无数据" v-else></no-data>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				hostUrl: app.globalData.hostUrl,
				background: `url(${app.globalData.hostUrl}/static/img/detail-bg.png)`,
				bgSize: '100% 800rpx',
				month:'',
				showPage:false,
				list:[],
				pageType:1,
			};
		},
		onLoad(option) {
			this.month = option.month ? option.month : '';
			this.pageType = option.type ? option.type : '';
			this.getDetail();
		},
		methods:{
			getDetail() {
				const that = this;
				uni.showLoading({
					title:'加载中...',
					mask:true,
				})
				const api = this.pageType == 1 ? app.getApi().user.subsidyDetail : app.getApi().user.comStatDetail
				app.globalRequest({
					api,
					data: {
						monthDate: that.month,
					}
				}).then(res => {
					console.log('res', res)
					that.showPage = true;
					if (res.code == 0) {
						that.list = res.data;
						console.log('that.list',that.list)
					}
				}).catch(err => {
			
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	image{
		width: 100%;
		height: 100%;
	}
	.bg{
		width: 100%;
		height: 800rpx;
		position: absolute;
		left:0;
		top:0;
	}
	.wrap{
		position: relative;
		z-index:2;
		padding-top:24rpx;
		padding-bottom: 150rpx;
	}
	.detail-wrap{
		margin:0 24rpx;
	}
	.detail-item{
		width: 100%;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding:0 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 24rpx;
		.detail-item-top{
			display: flex;
			justify-content: space-between;
			.title{
				font-weight: bold;
				font-size: 26rpx;
			}
			.num{
				font-family: 'DIN-BOLD';
				color:$dis-font-color;
				text{
					font-size: 20rpx;
				}
			}
		}
		.detail-item-bottom{
			display: flex;
			justify-content: space-between;
			margin-top:22rpx;
			font-size: 24rpx;
			color:#999999;
		}
	}

</style>
